// 发请求，由于参数比较多，每次ajax请求都要带上这些参数，很繁琐
// 处理
// 把参数放到一个对象，方便复用
let query = {
    // 接口的参数
    pagenum: 1, // 是	int	页码值
    pagesize: 2, //	是	int	每页显示多少条数据
    cate_id: '', // 	否	string	文章分类的 Id
    state: '', // 否	string	文章的状态，可选值有：已发布、草稿
}

const form = layui.form

// 文章列表数据
getArtList()
function getArtList() {
    axios
        .get('/my/article/list', {
            // get方式，需要在配置对象中，通过 params 来传递数据
            params: query,
        })
        .then(({ data: { data, total } }) => {
            let newArr = data.map(
                ({ title, cate_name, pub_date, state, Id }) => `
                <tr>
                    <td>${title}</td>
                    <td>${cate_name}</td>
                    <td>${pub_date}</td>
                    <td>${state}</td>
                    <td>
                        <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
                    </td>
                </tr>
            `
            )

            $('#list').html(newArr.join(''))

            // 处理分页
            renderPage(total)
        })
}

// 获取分类类别  列表数据 ==> 填充到分类的下拉框中
axios.get('/my/article/cates').then((res) => {
    // console.log(res);

    let newArr = res.data.data.map((item) => {
        // 还需要把option的value设置好值  value设置成对应的Id的值
        return `<option value="${item.Id}">${item.name}</option>`
    })
    // console.log(newArr.join(""));

    // 把option内容放到下拉框中  html() 方法可以使用，但是在这使用的话，会把原本的内容给覆盖掉，可以使用append方法进行添加（不会有覆盖问题）
    // $('#cateSelect').append(newArr.join(''))

    // 使用html方法，而且还不覆盖
    $('#cateSelect').html(
        '<option value="">所有分类</option>' + newArr.join('')
    )

    // 还需要手动渲染
    form.render()
})

// ================= 实现筛选功能 ================
//  步骤
//      1. 给筛选的表单注册submit事件
//      2. 阻止默认行为
//      3. 需要获取到下拉框的值 ==> jQ的val() 方法
//      4. 封装函数，以便复用
//      5. 在发送请求前，记得修改query对象的 cate_id（分类的id） + state（状态）
//      6. 调用函数，发送ajax请求

// 1.
$('#form').on('submit', function (e) {
    // 2.
    e.preventDefault()

    // 3.
    // console.log($("#cateSelect").val());
    // console.log($("#stateSelect").val());

    // 5. 还需要修改query对象的数据
    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()

    // 筛选的时候，每次都是看第一页的数据
    query.pagenum = 1

    // 6. 发送ajax获取对应的数据
    getArtList()
})

// 分页函数 ==> 调用位置有讲究（需要在获取到列表数据的时候来调用）
// count 总条数
const laypage = layui.laypage
function renderPage(count) {
    // 执行一个laypage实例
    laypage.render({
        elem: 'page-box', // 注意，这里的 page-box 是 ID，不用加 # 号
        count, // 数据总数，从服务端得到
        limit: query.pagesize, // 每页显示的条数
        limits: [1, 2, 3, 5, 8, 10], // 每页条数的选择项
        curr: query.pagenum, // 起始值
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            // 1. 分页被切换时触发
            // 2. laypage.render 渲染分页，也会触发jump函数
            // console.log(first)

            // console.log('jump 触发了')

            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr) // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit) //得到每页显示的条数

            // 修改query的pagenum的值
            query.pagenum = obj.curr
            // 修改query的pagesize的值 ==> obj.limit
            query.pagesize = obj.limit

            //首次不执行
            if (!first) {
                //do something  点击分页的时候，做啥
                // 发ajax请求
                getArtList()
            }
        },
    })
}

// =============== 删除功能 ===============
$('#list').on('click', '.btn_delete', function () {
    let id = $(this).attr('data-id')
    // console.log(id);

    layer.confirm(
        '确认删除此文章吗?',
        { icon: 3, title: '提示' },
        function (index) {
            // 该函数是在点击确认按钮的时候会执行

            // 点击确认，发送ajax请求
            axios.get('/my/article/delete/' + id).then((res) => {
                console.log(res)

                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }

                // 删除成功

                // ! 解决删除bug代码
                // 根据删除按钮的个数来判断
                if ($('.btn_delete').length === 1) {
                    // 加载上一页数据
                    query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
                }

                // 提示
                layer.msg(res.data.message)

                // 关闭该层
                layer.close(index)

                // 重新获取所有文章列表数据
                getArtList()
            })
        }
    )
})

// =============== 编辑功能 ===============
$('#list').on('click', '.btn_edit', function () {
    // 获取到编辑按钮上的id
    const id = $(this).attr('data-id')

    // 跳转页面
    location.href = '/article/art_edit.html?id=' + id
})
